<script setup>
import Header from '@/components/Header/Header.vue';
import TableList from '@/components/ScrollTable/ScrollTable.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, nextTick, onMounted } from 'vue';
import axios from 'axios';
import cyber from '../../lib/cybercloud';

const headerTitle = ref({
  titleIcon: 'iconfont Icon-kuweiguanli headerTitleIcon',
  name: '库位',
});

const buttons = ref(
  [
    {
      name: '新增',
      action: 'insertDialog',
      type: 'default',
      icon: false,
      dialogForm: {
        title: '新增',
        options: {
          'close-on-press-escape': false,
          'close-on-click-modal': false,
          'show-close': false,
          width: '50%',
        },
        rules: {},
        formRef: 'add', // 表单的ref
        formData: {
          details: [{
            name: '', // form表单分成多个 模块显示，name作为模块名称
            items: [
              {
                span: 2,
                code: 'code', // 传递数据参数
                show: true, // 是否展示
                post: true, // 是否作为参数
                value: '', // 值
                name: '库位', // 字段名称
                prop: 'code', // rule prop
                type: 'input', // input 输入框 selectRemote 远程调用的筛选框
                options: { // element组件相关属性
                  placeholder: '请输入库位',
                  readonly: false,
                  loading: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: {
                  rulesName: [
                    {
                      required: true,
                      message: '请输入库位',
                      trigger: 'blur',
                    },
                  ],
                },
              },
              {
                span: 2,
                code: 'zoneId',
                show: true,
                post: true,
                value: '',
                name: '库区',
                prop: 'zoneId',
                type: 'selectRemote',
                selectRemote: {
                  method: 'POST',
                  url: 'api/app/corm/list',
                  params: {
                    objectId: 'zone',
                    fields: ['id', 'code', 'name'],
                    offset: 0,
                    pageSize: 20,
                    filters: [
                      {
                        code: 'code',
                        id: 'zone.code',
                        operator: 'like',
                        value: '',
                      },
                      {
                        code: 'status',
                        id: 'zone.status',
                        operator: 'eq',
                        value: 'ENABLE',
                      },
                    ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
                  },
                  optionsData: {
                    attribute: {
                      value: 'id', // 返回数据所需字段名称
                      label: 'name',
                      code: 'code',
                    },
                    data: [],
                  },
                }, // selectRemote 远程调用属性配置
                rules: {
                  rulesName: [
                    {
                      required: true,
                      message: '请输入搜索选择库区',
                      trigger: 'change',
                    },
                  ],
                },
                options: {
                  readonly: false,
                  placeholder: '请选择库区',
                  style: {
                    width: '300px',
                  },
                },
              },
              {
                span: 2,
                code: 'locationTypeId',
                show: true,
                post: true,
                value: '',
                name: '库位类型',
                type: 'selectRemote',
                selectRemote: {
                  method: 'POST',
                  url: 'api/app/corm/list',
                  params: {
                    objectId: 'locationType',
                    fields: ['id', 'code', 'name'],
                    offset: 0,
                    pageSize: 20,
                    filters: [
                      {
                        code: 'code',
                        id: 'locationType.code',
                        operator: 'like',
                        value: '',
                      },
                      {
                        code: 'status',
                        id: 'locationType.status',
                        operator: 'eq',
                        value: 'ENABLE',
                      },
                    ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
                  },
                  optionsData: {
                    attribute: {
                      value: 'id', // 返回数据所需字段名称
                      label: 'name',
                      code: 'code',
                    },
                    data: [],
                  },
                }, // selectRemote 远程调用属性配置
                rules: {
                  rulesName: [
                    {
                      required: true,
                      message: '请输入搜索选择库位类型',
                      trigger: 'change',
                    },
                  ],
                },
                options: {
                  readonly: false,
                  placeholder: '请选择库位类型',
                  style: {
                    width: '300px',
                  },
                },
              },
              {
                span: 2,
                code: 'locationClass',
                show: true, // 是否展示
                post: true,
                name: '库位种类',
                value: '',
                type: 'select',
                options: {
                  placeholder: '请选择库位种类',
                  readonly: false,
                  loading: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: {
                  rulesName: [
                    {
                      required: true,
                      message: '请输入库位种类',
                      trigger: 'change',
                    },
                  ],
                },
                enumsName: 'locationClass',
              },
              {
                span: 2,
                code: 'operationType',
                show: true, // 是否展示
                post: true,
                name: '作业类型',
                value: '',
                prop: 'operationType', // rule prop
                type: 'select',
                options: {
                  placeholder: '请选择作业类型',
                  readonly: false,
                  loading: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: {
                  rulesName: [
                    {
                      required: true,
                      message: '请输入作业类型',
                      trigger: 'change',
                    },
                  ],
                },
                enumsName: 'operationType',
              },
              {
                span: 2,
                code: 'floor',
                show: true, // 是否展示
                post: true,
                name: '楼层',
                value: '',
                type: 'select',
                options: {
                  placeholder: '请选择楼层',
                  readonly: false,
                  loading: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: {
                  rulesName: [],
                },
                enumsName: 'floor',
              },
              {
                span: 2,
                code: 'aisleId',
                show: true,
                post: true,
                value: '',
                name: '巷道',
                type: 'selectRemote',
                selectRemote: {
                  method: 'POST',
                  url: 'api/app/corm/list',
                  params: {
                    objectId: 'aisle',
                    fields: ['id', 'code'],
                    offset: 0,
                    pageSize: 20,
                    filters: [
                      {
                        code: 'code',
                        id: 'aisle.code',
                        operator: 'like',
                        value: '',
                      },
                      {
                        code: 'status',
                        id: 'aisle.status',
                        operator: 'eq',
                        value: 'ENABLE',
                      },
                    ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
                  },
                  optionsData: {
                    attribute: {
                      value: 'id', // 返回数据所需字段名称
                      label: 'code',
                      code: 'code',
                    },
                    data: [],
                  },
                }, // selectRemote 远程调用属性配置
                rules: { rulesName: [] },
                options: {
                  readonly: false,
                  placeholder: '请选择库巷道',
                  style: {
                    width: '300px',
                  },
                },
              },
              {
                span: 2,
                code: 'row', // 传递数据参数
                show: true, // 是否展示
                post: true, // 是否作为参数
                value: 1, // 值
                name: '排', // 字段名称
                prop: '', // rule prop
                type: 'inputNumberPositive', // inputNumberPositive 正整数
                options: { // element组件相关属性
                  placeholder: '请输入排',
                  readonly: false,
                  loading: false,
                  min: 0,
                  max: 9999,
                  step: 1,
                  precision: 0,
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'col', // 传递数据参数
                show: true, // 是否展示
                post: true, // 是否作为参数
                value: 1, // 值
                name: '列', // 字段名称
                prop: '', // rule prop
                type: 'inputNumberPositive', // inputNumberPositive 正整数
                options: { // element组件相关属性
                  placeholder: '请输入列',
                  readonly: false,
                  loading: false,
                  min: 0,
                  max: 9999,
                  step: 1,
                  precision: 0,
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'tier', // 传递数据参数
                show: true, // 是否展示
                post: true, // 是否作为参数
                value: 1, // 值
                name: '层', // 字段名称
                type: 'inputNumberPositive', // inputNumberPositive 正整数
                options: { // element组件相关属性
                  placeholder: '请输入层',
                  readonly: false,
                  loading: false,
                  min: 0,
                  max: 9999,
                  step: 1,
                  precision: 0,
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'status', // 传递数据参数
                show: false, // 是否展示
                post: true, // 是否作为参数
                value: 'ENABLE', // 值  状态此处设置默认值
                name: '状态', // 字段名称
                type: 'input', // input 输入框 selectRemote 远程调用的筛选框
                options: { // element组件相关属性
                  placeholder: '请输入状态',
                  readonly: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'allowStatusChange', // 传递数据参数
                show: false, // 是否展示
                post: true, // 是否作为参数
                value: 'YES', // 值  状态此处设置默认值
                name: '允许调整状态', // 字段名称
                type: 'input', // input 输入框 selectRemote 远程调用的筛选框
                options: { // element组件相关属性
                  placeholder: '请输入允许调整状态',
                  readonly: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'trackLpn', // 传递数据参数
                show: false, // 是否展示
                post: true, // 是否作为参数
                value: 'YES', // 值  状态此处设置默认值
                name: '记录托盘', // 字段名称
                type: 'input', // input 输入框 selectRemote 远程调用的筛选框
                options: { // element组件相关属性
                  placeholder: '请输入记录托盘',
                  readonly: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'ingoreCapacity', // 传递数据参数
                show: false, // 是否展示
                post: true, // 是否作为参数
                value: 'NO', // 值  状态此处设置默认值
                name: '忽略容量', // 字段名称
                prop: '', // rule prop
                type: 'input', // input 输入框 selectRemote 远程调用的筛选框
                options: { // element组件相关属性
                  placeholder: '请输入忽略容量',
                  readonly: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: { rulesName: [] },
              },
              {
                span: 2,
                code: 'rplnIngoreCapacity', // 传递数据参数
                show: false, // 是否展示
                post: true, // 是否作为参数
                value: 'NO', // 值  状态此处设置默认值
                name: '补货忽略容量', // 字段名称
                type: 'input',
                options: { // element组件相关属性
                  placeholder: '请输入补货忽略容量',
                  readonly: false,
                  style: {
                    width: '300px',
                  },
                },
                rules: { rulesName: [] },
              },
            ],
          }],
        },
        apiInfo: {
          url: '/api/app/corm/create',
          method: 'POST',
          body: {
            objectId: 'location',
            params: {},
          },
        },
      },
    },
    {
      name: '删除',
      action: 'deleteDialog',
      type: 'default',
      icon: false,
      deleteDialog: {
        title: '提示',
        content: '是否删除?',
      },
    },
    {
      name: '启用',
      action: 'returnDo',
      type: 'default',
      icon: false,
      returnDo: {
        action: 'enable',
      },
    },
    {
      name: '禁用',
      action: 'returnDo', // 返回父组件处理
      type: 'default',
      icon: false,
      returnDo: {
        action: 'disable',
      },
    },
    {
      name: 'RefreshRight', // 如果是icon时填入
      action: 'refreshList',
      type: 'default',
      icon: true,
    },
  ],
);

const deleteParams = ref({
  objectId: 'location',
  params: { ids: [] },
});

const tableConfig = ref({
  height: 'auto',
  routerLink: '/detail',
  fetchParams: {
    objectId: 'location',
    filters: [
      {
        code: 'code',
        id: 'location.code',
        operator: 'like',
        value: '',
      },
      {
        code: 'zoneId',
        id: 'location.zoneId',
        operator: 'eq',
        value: '',
      },
      {
        code: 'locationTypeId',
        id: 'location.locationTypeId',
        operator: 'eq',
        value: '',
      },
      {
        code: 'locationClass',
        id: 'location.locationClass',
        operator: 'eq',
        value: '',
      },
      {
        code: 'operationType',
        id: 'location.operationType',
        operator: 'eq',
        value: '',
      },
      {
        code: 'aisleId',
        id: 'location.aisleId',
        operator: 'eq',
        value: '',
      },
      {
        code: 'status',
        id: 'location.status',
        operator: 'eq',
        value: '',
      },
    ],
  },
  conversionJson: {
    zoneId: {
      name: 'zoneName',
    },
    locationTypeId: {
      name: 'locationTypeName',
    },
  },
  conversionEnum: {
    status: 'status',
    locationClass: 'locationClass',
    operationType: 'operationType',
  },
  columns: [
    {
      type: 'checkbox',
      width: '60px',
    },
    {
      field: 'code',
      slot: true,
      title: '库位',
    },
    {
      field: 'zoneId',
      title: '库区',

    },
    {
      field: 'locationTypeId',
      title: '库位类型',

    },
    {
      field: 'locationClass',
      title: '库位种类',

    },
    {
      field: 'operationType',
      title: '作业类型',

    },
    {
      field: 'status',
      title: '状态',

    },
    {
      field: 'lastUpdated',
      title: '修改时间',
    },
    {
      field: 'lastUpdatedBy',
      title: '修改人',
    },
  ],
  data: [],
});

const selectForm = ref({
  size: 'small',
  labelPosition: 'right',
  labelWidth: '80px',
  items: [
    {
      code: 'code',
      name: '库位',
      value: '',
      type: 'input',
      options: {
        placeholder: '请输入库位',
        style: {
          width: '200px',
        },
      },
    },
    {
      code: 'zoneId',
      name: '库区',
      value: '',
      type: 'selectRemote',
      options: {
        placeholder: '请选择库区',
        style: {
          width: '200px',
        },
        loading: false,
      },
      selectRemote: {
        method: 'POST',
        url: 'api/app/corm/list',
        params: {
          objectId: 'zone',
          fields: ['id', 'code', 'name'],
          offset: 0,
          pageSize: 50,
          filters: [
            {
              code: 'code',
              id: 'zone.code',
              operator: 'like',
              value: '',
            },
            {
              code: 'status',
              id: 'zone.status',
              operator: 'eq',
              value: 'ENABLE',
            },
          ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
        },
        optionsData: {
          attribute: {
            value: 'id', // 返回数据所需字段名称
            label: 'name',
            code: 'code',
          },
          data: [],
        },
      }, // selectRemote 远程调用属性配置
    },
    {
      code: 'locationTypeId',
      name: '库位类型',
      value: '',
      type: 'selectRemote',
      options: {
        placeholder: '请选择库位类型',
        style: {
          width: '200px',
        },
        loading: false,
      },
      selectRemote: {
        method: 'POST',
        url: 'api/app/corm/list',
        params: {
          objectId: 'locationType',
          fields: ['id', 'code', 'name'],
          offset: 0,
          pageSize: 20,
          filters: [
            {
              code: 'code',
              id: 'locationType.code',
              operator: 'like',
              value: '',
            },
            {
              code: 'status',
              id: 'locationType.status',
              operator: 'eq',
              value: 'ENABLE',
            },
          ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
        },
        optionsData: {
          attribute: {
            value: 'id', // 返回数据所需字段名称
            label: 'name',
            code: 'code',
          },
          data: [],
        },
      }, // selectRemote 远程调用属性配置
    },
    {
      code: 'locationClass',
      name: '库位种类',
      value: '',
      type: 'select',
      options: {
        placeholder: '请选择库位种类',
        style: {
          width: '200px',
        },
      },
      enumsName: 'locationClass',
    },
    {
      code: 'operationType',
      name: '作业类型',
      value: '',
      type: 'select',
      options: {
        placeholder: '请选择作业类型',
        style: {
          width: '200px',
        },
      },
      enumsName: 'operationType',
    },
    {
      code: 'aisleId',
      name: '巷道',
      value: '',
      type: 'selectRemote',
      options: {
        placeholder: '请选择巷道',
        style: {
          width: '200px',
        },
        loading: false,
      },
      selectRemote: {
        method: 'POST',
        url: 'api/app/corm/list',
        params: {
          objectId: 'aisle',
          fields: ['id', 'code'],
          offset: 0,
          pageSize: 20,
          filters: [
            {
              code: 'code',
              id: 'aisle.code',
              operator: 'like',
              value: '',
            },
            {
              code: 'status',
              id: 'aisle.status',
              operator: 'eq',
              value: 'ENABLE',
            },
          ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
        },
        optionsData: {
          attribute: {
            value: 'id', // 返回数据所需字段名称
            label: 'code',
            code: 'code',
          },
          data: [],
        },
      }, // selectRemote 远程调用属性配置
    },
    {
      code: 'status',
      name: '状态',
      value: '',
      type: 'select',
      options: {
        placeholder: '请选择状态',
        style: {
          width: '200px',
        },
      },
      enumsName: 'status',
    },
  ],
});

const tableList = ref(null);

const enums = ref({});

const checkedIds = ref([]);

/**
 * 刷新列表
 */
function refreshList() {
  tableList.value.reload();
}

function findPickList(code) {
  return cyber.request({
    method: 'POST',
    url: '/api/app/picklist/value/list ',
    data: {
      picklistCode: code,
    },
  });
}

function findData() {
  axios.all([
    findPickList('LOCATION_CLASS').then((response) => {
      if (response.success) {
        const list = [];
        Object.values(response.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        enums.value.locationClass = list;
      } else {
        ElMessage.error('库位种类获取失败');
      }
    }).catch(() => ElMessage.error('库位种类获取失败')),
    findPickList('OPERATION_TYPE').then((response) => {
      if (response.success) {
        const list = [];
        Object.values(response.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        enums.value.operationType = list;
      } else {
        ElMessage.error('作业类型获取失败');
      }
    }).catch(() => ElMessage.error('作业类型获取失败')),
    findPickList('FLOOR').then((response) => {
      if (response.success) {
        const list = [];
        Object.values(response.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        enums.value.floor = list;
      } else {
        ElMessage.error('楼层获取失败');
      }
    })
      .catch(() => ElMessage.error('楼层获取失败')),
    findPickList('STATUS').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.status = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
    findPickList('YES_NO').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.YES_NO = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
  ]).then(() => {
    nextTick(() => {
      refreshList();
    });
  });
}

function getCheckboxRecords(rows) {
  deleteParams.value.params.ids = [];
  checkedIds.value = [];
  Object.values(rows)
    .forEach((item) => {
      deleteParams.value.params.ids.push(item.id);
      checkedIds.value.push(item.id);
    });
}

function enableBox() {
  if (checkedIds.value.length === 0) {
    ElMessage.warning('至少选中一条数据');
    return;
  }
  ElMessageBox.confirm(
    '是否启用库位？',
    '启用库位',
    {
      confirmButtonText: '启用',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      cyber.request({
        headers: { 'Content-Type': 'application/json' },
        method: 'POST',
        url: 'api/location/location/enable',
        data: checkedIds,
      })
        .then((response) => {
          if (response.success) {
            ElMessage.success('启用成功');
          } else {
            ElMessage.error(response.message);
          }
          refreshList();
        })
        .catch(() => ElMessage.error('操作失败'));
    })
    .catch(() => {
      ElMessage.info('取消启用');
    });
}
/**
 * 禁用
 */
function disableBox() {
  if (checkedIds.value.length === 0) {
    ElMessage.error('至少选中一条数据');
    return;
  }
  ElMessageBox.confirm(
    '是否禁用库位？',
    '禁用库位',
    {
      confirmButtonText: '禁用',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      cyber.request({
        headers: { 'Content-Type': 'application/json' },
        method: 'POST',
        url: 'api/location/location/disable',
        data: checkedIds,
      })
        .then((response) => {
          if (response.success) {
            ElMessage.success('禁用成功');
          } else {
            ElMessage.error(response.message);
          }
          refreshList();
        })
        .catch(() => ElMessage.error('操作失败'));
    })
    .catch(() => {
      ElMessage.info('取消禁用');
    });
}
/**
 * 子组件功能返回父组件处理
 */
function returnDo(action) {
  if (action === 'enable') {
    enableBox();
  } else if (action === 'disable') {
    disableBox();
  }
}
onMounted(() => {
  findData();
});
</script>
<template>
  <div class="header_div">
    <Header :title="headerTitle"
            :buttons="buttons"
            :enums="enums"
            :deleteParams="deleteParams"
            @refreshList="refreshList"
            @returnDo="returnDo"
    ></Header>
    <div class="table_div">
      <TableList
        ref="tableList"
        :enums="enums"
        :tableConfig="tableConfig"
        :selectForm='selectForm'
        @getCheckboxRecords="getCheckboxRecords"
      >
      </TableList>
    </div>
  </div>
</template>
<style scoped lang="sass">
@import "table.sass"
</style>
